<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="80px"
    class="ruleForm"
  >
    <span style="color: red; font-size: 10px"
      >填写【有效期至】或【生产日期和保质期】</span
    >
    <el-form-item label="食品名称" prop="name">
      <el-input
        type="text"
        v-model="ruleForm.name"
        autocomplete="off"
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="生产日期" prop="productDate">
      <el-date-picker
        class="datePicker"
        v-model="ruleForm.productDate"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="有效期至" prop="endDate">
      <el-date-picker
        class="datePicker"
        v-model="ruleForm.endDate"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="保质期">
      <el-row>
        <el-col :span="16">
          <el-form-item prop="daysNum">
            <el-input v-model.number="ruleForm.daysNum" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="daysType">
            <el-select
              v-model="ruleForm.daysTypeName"
              @change="changeSelectValue($event)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm()">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>

    <el-table
      class="left"
      :data="tableData"
      max-height="300"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="name" label="名称" width="130px">
      </el-table-column>
      <el-table-column prop="lastDays" label="剩余天数" width="130px">
      </el-table-column>
      <el-table-column label="操作" width="50px">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, scope.row)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>

<script>
import request from "@/utils/request";
export default {
  // name: "autotexpiredWarnningest",
  data() {
    var checkDays = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入保质期"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字"));
        } else {
          if (value <= 0) {
            callback(new Error("必须大于0"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validateDate = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入日期"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        productDate: "",
        endDate: "",
        daysNum: "",
        daysType: 1,
        daysTypeName: "天",
      },
      rules: {
        name: [{ required: true, message: "请输入食品名称", trigger: "blur" }],
        productDate: [{ validator: validateDate, trigger: "blur" }],
        endDate: [{ validator: validateDate, trigger: "blur" }],
        daysNum: [{ validator: checkDays, trigger: "blur" }],
      },
      tableData: [],
      options: [
        {
          value: 1,
          label: "天",
        },
        {
          value: 2,
          label: "月",
        },
        {
          value: 3,
          label: "年",
        },
      ],
    };
  },
  methods: {
    async submitForm() {
      let res = await request({
        url: `tools/expiredWarnning`,
        headers: {
          isToken: true,
        },
        method: "post",
        data: this.ruleForm,
      });
      if (res.code === 200) {
        this.getList();
        alert(res.msg);
      } else {
        alert(res.msg);
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取列表数据
    async getList() {
      let res = await request({
        url: `tools/expiredWarnning/list`,
        headers: {
          isToken: true,
        },
        method: "get",
      });
      if (res.code === 200) {
        // console.log(res.data);
        this.tableData = res.data;
      } else {
        alert(res.msg);
      }
    },
    async deleteListData(id) {
      let res = await request({
        url: `tools/expiredWarnning/delete?id=${id}`,
        headers: {
          isToken: true,
        },
        method: "get",
      });
      return res;
    },

    async deleteRow(index, row) {
      let res = await this.deleteListData(row.id);
      if (res.code === 200) {
        this.tableData.splice(index, 1);
      } else {
        // console.log(res);
        alert(res.msg);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.lastDays <= 0) {
        // 已经过期
        return "warning-row";
      } else if (row.lastDays <= 7) {
        // 快过期
        return "success-row";
      }
      return "";
    },
    changeSelectValue(value) {
      // console.log(value);
      this.ruleForm.daysType = value;
    },
  },
  mounted: function () {
    this.getList();
  },
};
</script>

<style>
.ruleForm {
  margin-top: 20px;
  width: 300px;
}
.datePicker {
  float: left;
}
.left {
  margin-left: 30px;
}

.el-table {
  width: 100%;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
